

<template>

  <van-nav-bar :title="title"  left-arrow fixed @click-left="onClickLeft" @click-right="onClickRight">
    <template #right>
      <van-icon name="search" size="18" />
    </template>
  </van-nav-bar>

  <div id="content">
    <router-view/>
  </div>

  <van-tabbar route>
    <van-tabbar-item to="/" icon="home-o" name="index">主页</van-tabbar-item>
    <van-tabbar-item to="/team" icon="search" name="team">队伍</van-tabbar-item>
    <van-tabbar-item to="/user" icon="friends-o" name="user">个人</van-tabbar-item>
  </van-tabbar>


</template>

<script setup lang="ts">

import { useRouter} from "vue-router";
import {ref} from "vue";
import routes from "../config/router.ts";
const router = useRouter();
const onClickLeft = () =>{
  router.back();
};

const title = ref();
const onClickRight = () => {
  router.push('/search')
};
const DEFAULT_TITLE = "WaterBird"
/**
 * 根据路由切换标题
 */
router.beforeEach((to) => {
  const toPath = to.path;
  const route = routes.find((route) => {
    return toPath == route.path;
  })
  title.value = route?.title ?? DEFAULT_TITLE;
})

</script>
<style scoped>
#content {
  padding-top: 50px;
  padding-bottom: 50px;
}
</style>